<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12"
        ><el-card>
          <div
            :style="{ width: '600px', height: '400px' }"
            ref="charts1"
          ></div>
        </el-card>
      </el-col>
      <el-col :span="12"
        ><el-card>
          <div
            :style="{ width: '500px', height: '400px'}"
            class="ech"
            ref="charts"
          ></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      four: {},
    };
  },
  mounted() {
    this.getbing();
    this.getbar();
  },
  methods: {
    async getbar() {
      let result = await this.$API.echarts.getTypeNum();
      if (result.code == 200) {
        var type = [];
        var num = [];

        result.data.forEach((item) => {
          if(item.type==1){
             type.push("上线");
          }
           if(item.type==2){
             type.push("待审核");
          }
           if(item.type==3){
             type.push("推举");
          }
           if(item.type==0){
             type.push("不通过");
          }
         
          num.push(item.num);
        });

        var myChart1 = echarts.init(this.$refs.charts1);
     myChart1.setOption({
  xAxis: {
    type: "category",
    data: type,
    axisLabel: {
      textStyle: {
        color: '#333', // x轴标签文字颜色
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      textStyle: {
        color: '#333', // y轴标签文字颜色
      },
    },
  },
  series: [
    {
      data: num,
      type: "bar",
      itemStyle: {
        color: function(params) {
          var colorList = ['#5470C6', '#91CC75', '#EE6666', '#FFC000']; // 自定义颜色数组
          return colorList[params.dataIndex]; // 根据索引设置颜色
        }
      },
      label: {
        show: true, // 显示柱状图标签
        position: 'top', // 标签位置
        textStyle: {
          color: '#333', // 标签文字颜色
        },
      },
    },
  ],
  title: {
    text: '各状态博客数量',
    textStyle: {
      color: '#333', // 标题文字颜色
    },
  },
  legend: {
    data: ['柱状图'],
    textStyle: {
      color: '#333', // 图例文字颜色
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  animation: true,
});


      }
    },
    async getbing() {
      let result = await this.$API.echarts.getClassifyNum();
      if (result.code == 200) {
        var obj = { value: "", name: "" };
        var data = [];
        result.data.forEach((item) => {
          obj.value = item.num;
          obj.name = item.cname;
          data.push(obj);
          obj = { value: 0, name: "" };
        });
        var myChart = echarts.init(this.$refs.charts);
        myChart.setOption({
          title: {
            text: "各分类文章占比",
            // subtext: 'Fake Data',
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: "50%",
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      }
    },
  },
};
</script>

<style  scoped>
.svg {
  display: flex;
  justify-content: space-between;
}

.svg-content {
  flex: 1;
  text-align: center;
}

.svg-title {
  font-size: 20px;
  font-weight: bold;
}
.ech{
  margin-left: 100px;
}
</style>